<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background-color: aqua;
        }
    </style>
    <script>
        window.onload = function() {
            /* 一、操作内联样式
                1.读取元素内联样式：
                    语法：获取到的元素.style.样式名
                2.修改元素内联样式：
                    语法：获取到的元素.style.样式名 = 样式值
            */

            // 获取box1
            var box1 = document.querySelector(".box1");
            // 读取样式值
            console.log(box1.style.width);
            // 修改样式值
            var btn1 = document.querySelector(".btn1");
            btn1.onclick = function() {
                box1.style.backgroundColor = "yellow";
            }

            // 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
            /* 二、获取元素样式
                1. 正常浏览器：使用getComputedStyle()
                    这个方法是window的方法，可以直接使用，需要两个参数
                        第一个：要获取样式的元素
                        第二个：可以传递一个伪元素，一般都传null
                    该方法会返回一个对象，对象中封装了当前元素对应的样式
                    可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                    比如：没有设置 width，它不会获取到 auto，而是一个长度
                    但是该方法不支持IE8及以下的浏览器
                2.IE浏览器：使用currentStyle()，语法：元素.currentStyle.样式名
                    它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值
            */

            // 由于上述所述的问题，所以需要考虑兼容性
            
            // 自定义兼容所有浏览器获取元素样式的方法
            // obj是具体的元素，name是具体的样式
            function getStyle(obj, name) {
                // 判断是否有getComputedStyle方法，如果有就是正常的浏览器，否则是IE
                if(window.getComputedStyle){
                    // 正常浏览器
                    return getComputedStyle(obj, null)[name];
                }else {
                    // IE
                    // 不能用obj.currentStyle.name，因为这样的话，会把name当成字符串来处理了，而不是变量
                    // 所以需要使用obj.currentStyle[name]
                    return obj.currentStyle[name];
                }
            }

            // 使用三元运算符进行简洁处理
            function getStyle(obj, name){
                return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
            }

        }
    </script>
</head>
<body>
    <button class="btn1">Click me!</button>
    <div class="box1" style="width: 200px; height: 200px; "></div>
</body>
</html>